<template>
  <div class="contentBox" @mouseenter="stopCal" @mouseleave="startCal">
    <div class="carouselBox">
      <slot name="carousels"></slot>
    </div>
    <div class="buttons">
      <template v-for="(item, index) in this.butsNum">
        <div :key="index" class="but" @click="showActive(index)"></div>
      </template>
    </div>
    <template v-if="arrow == 'enter'">
      <div class="fuhao" @click="lastImg" :class="isShow ? 'last' : 'last1'"></div>
      <div class="fuhao" @click="nextImg" :class="isShow ? 'next' : 'next1'"></div>
    </template>
    <template v-if="arrow == 'always'">
      <div class="fuhao lastAlways" @click="lastImg"></div>
      <div class="fuhao nextAlways" @click="nextImg"></div>
    </template>

  </div>
</template>

<script>
export default {
  props: {
    arrow: {
      type: String,
      default() {
        return enter
      }
    },
    interval: {
      type: Number,
      default() {
        return 2000
      }
    }
  },
  data() {
    return {
      carouselTimer: null,
      butsNum: 0, // 指示点 - 个数
      butsArr: [], // 指示点数组
      carouselsArr: [], // 轮播图的数组
      active: 0, // 指示点 - 选中的
      isShow: false, // 箭头是否显示
    }
  },
  mounted() {
    if (this.arrow == 'always') { this.isShow = true }
    this.butsArr = document.getElementsByClassName('buttons')[0].childNodes
    this.butsNum = document.getElementsByClassName('carouselBox')[0].childNodes.length


    console.log('qqqqqqqqqqqq', document.getElementsByClassName('carouselBox')[0])
    let carousel = document.getElementsByClassName('carouselBox')[0].childNodes[0].cloneNode(true)
    document.getElementsByClassName('carouselBox')[0].appendChild(carousel)
    console.log('hhhhhhhhhh', document.getElementsByClassName('carouselBox')[0])


    this.carouselsBox = document.getElementsByClassName('carouselBox')[0]
    this.carouselsArr = document.getElementsByClassName('carouselBox')[0].childNodes





    // let aaa = document.getElementsByClassName('carouselBox')[0].childNodes[0]
    // console.log('aaa', aaa)
    // let li = document.getElementsByClassName('carouselBox')[0].createElement(aaa)
    // document.getElementsByClassName('carouselBox')[0].appendChild(li)
    // console.log('this.carouselsArr', this.carouselsArr)
    // let aaa = [...this.carouselsArr]
    // let aaa = this.carouselsArr
    // let aaa = ['11', '22', '33']
    // let bbb = [aaa[0]]
    // let ccc = aaa.concat(bbb)
    // aaa.length = aaa.length + 1
    // this.carouselsArr.push([this.carouselsArr[0]])
    // console.log('aaa', aaa)
    // console.log('bbb', bbb)
    // console.log('ccc', ccc)
    // console.log('RRRRRR', this.carouselsArr[0].style.transform = `translateX(6px)`)
    // let bbb = aaa.concat(aaa[0])
    // console.log('bbb', bbb)


    this.$nextTick(() => {
      this.carouselsBox.style.transform = `translateY(0px)`
      this.butsArr[this.active].style.backgroundColor = 'blue'
      this.initCarousel()
    })
  },
  methods: {
    initCarousel() {
      this.carouselTimer = setInterval(() => {
        this.butsArr.forEach(item => { item.style.backgroundColor = '#aaa' })
        if (this.active < this.butsNum + 1) { this.active++ }
        if (this.active == this.butsNum + 1) { this.active = 0 }

        if (this.active < this.butsNum) { this.butsArr[this.active].style.backgroundColor = 'blue' }
        if (this.active == this.butsNum) { this.butsArr[0].style.backgroundColor = 'blue' }
        this.carouselsBox.style.transform = `translateY(-${this.active * 150}px)`
        if (this.active != 0) {
          console.log('FFFFF', this.active)
          this.carouselsBox.style.transition = `transform 1s linear`
        } else {
          this.carouselsBox.style.transition = `transform 0s linear`
          this.carouselsBox.style.transform = `translateY(0px)`
        }
        console.log('RTTTTTTTTTT', this.active, this.carouselsBox.style.transform)
      }, this.interval)
    },
    showActive(num) {
      // console.log('YYY', this.active, num)
      // 点击某个点时 跳转到对应的图片
      this.active = num
      this.carouselsBox.style.transform = `translateY(-${num * 150}px)`
      this.carouselsBox.style.transition = `transform 0s linear`
      // this.carouselsBox.style.transition = `transform 1s linear`
      // 点击某个点时 设置该点的颜色为选中的状态
      this.butsArr.forEach(item => { item.style.backgroundColor = '#aaa' })
      this.butsArr[num].style.backgroundColor = 'blue'
    },
    // 鼠标移入 轮播停止
    stopCal() {
      clearInterval(this.carouselTimer)
      this.carouselTimer = null
      if (this.arrow == 'enter') { this.isShow = true }
    },
    // 鼠标移出 轮播继续
    startCal() {
      this.initCarousel()
      if (this.arrow == 'enter') { this.isShow = false }
    },
    // 点击 切换 上一张 图片
    lastImg() {
      this.active = this.active + 1
      if (this.active == this.butsArr.length) { this.active = 0 }
      this.carouselsArr.forEach(item => { item.style.zIndex = 1 })
      this.carouselsArr[this.active].style.zIndex = 10
      this.butsArr.forEach(item => { item.style.backgroundColor = '#aaa' })
      this.butsArr[this.active].style.backgroundColor = 'blue'

    },
    // 点击 切换 下一张 图片
    nextImg() {
      this.active = this.active - 1
      if (this.active == -1) { this.active = this.butsArr.length - 1 }
      this.carouselsArr.forEach(item => { item.style.zIndex = 1 })
      this.carouselsArr[this.active].style.zIndex = 10
      this.butsArr.forEach(item => { item.style.backgroundColor = '#aaa' })
      this.butsArr[this.active].style.backgroundColor = 'blue'

    }
  },
  destroyed() {
    clearInterval(this.carouselTimer)
    this.carouselTimer = null
  }

}
</script>

<style scoped>
.contentBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* display: flex; */
  /* float: left; */
}

.buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  z-index: 20;
}

.but {
  width: 25px;
  height: 3px;
  border-radius: 2px;
  background-color: #aaa;
  margin: 0px 2px 0px 2px;
  cursor: pointer;
}

.carouselBox {
  width: auto;
  height: auto;
  font-size: 30px;
  line-height: 150px;
  text-align: center;
  /* display: flex; */
  /* overflow: hidden; */

}

.carouselBox img {
  width: 100%;
  height: 100%;
}

.carousel:nth-child(odd) {
  width: 100%;
  height: 100%;
  background: skyblue;
}

.carousel:nth-child(even) {
  width: 100%;
  height: 100%;
  background: pink;
}

.fuhao {
  display: inline-block;
  width: 15px;
  height: 30px;
  background-size: 100% 100%;
  background-image: url("@/components/carousel/image/triangle.png");
  z-index: 20;
  cursor: pointer;
}

.lastAlways {
  position: absolute;
  top: 40%;
  right: 10px;
}

.nextAlways {
  transform: rotate(-180deg);
  position: absolute;
  top: 40%;
  left: 10px;
}

/* 鼠标移入时 箭头的动画 */
.last {
  position: absolute;
  top: 40%;
  right: 10px;
  animation: last 1s linear 1;
}

.next {
  transform: rotate(-180deg);
  position: absolute;
  top: 40%;
  left: 10px;
  animation: next 1s linear 1;
}

@keyframes last {
  0% {
    transform: translateX(6px);
    opacity: 0;
  }

  50% {
    transform: translateX(3px);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes next {
  0% {
    transform: translateX(-6px) rotate(-180deg);
    opacity: 0;
  }

  50% {
    transform: translateX(-3px) rotate(-180deg);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0px) rotate(-180deg);
    opacity: 1;
  }
}

/* 鼠标移出时 箭头的动画 */
.last1 {
  position: absolute;
  top: 40%;
  right: 10px;
  animation: last1 1s linear 1;
  opacity: 0;
}

.next1 {
  transform: rotate(-180deg);
  position: absolute;
  top: 40%;
  left: 10px;
  animation: next1 1s linear 1;
  opacity: 0;
}

@keyframes last1 {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }

  50% {
    transform: translateX(3px);
    opacity: 0.5;
  }

  100% {
    transform: translateX(6px);
    opacity: 0;
  }
}

@keyframes next1 {
  0% {
    transform: translateX(0px) rotate(-180deg);
    opacity: 1;
  }

  50% {
    transform: translateX(-3px) rotate(-180deg);
    opacity: 0.5;
  }

  100% {
    transform: translateX(-6px) rotate(-180deg);
    opacity: 0;
  }
}
</style>